<template>
  <CloudDialog
    v-model:visible="visible"
    title="换绑"
    :width="480"
    :mask-closable="false"
    :before-open="handleOpen"
    :before-ok="handleSubmit"
    :before-close="handleClose">
    <a-form ref="formRef" layout="vertical" :rules="rules" :model="formState">
      <a-form-item label="授权码" field="key" hide-asterisk>
        <a-input
          v-model="formState.key"
          :max-length="32"
          placeholder="请输入授权码"></a-input>
      </a-form-item>
    </a-form>
  </CloudDialog>
</template>
<script lang="ts" setup>
// import type { AreaItem } from '@/apis/model/resolve'
import { postApiLicenseReplaceBindApi } from '@/apis/modules/resolve/license'
import type { FieldRule, FormInstance } from '@arco-design/web-vue'
// interface IProp {
//   record?: AreaItem
// }
const visible = defineModel<boolean>('visible', { required: true })
// const props = withDefaults(defineProps<IProp>(), {})
interface IEmits {
  (e: 'reload'): void
  (e: 'update:visible', value: boolean): void
}
const emits = defineEmits<IEmits>()

const formRef = ref<FormInstance>()
const formState = reactive({
  key: ''
})

const rules: Record<string, FieldRule[] | FieldRule> = {
  key: [{ required: true, message: '请输入授权码' }]
}

const handleOpen = async () => {}

const handleSubmit = async () => {
  const error = await formRef.value?.validate()
  if (error) return false
  const data = {
    key: formState.key
  }
  await postApiLicenseReplaceBindApi(data).then(() => {
    ToastUtils.success('操作成功')
    emits('reload')
    visible.value = false
  })
}

const handleClose = () => {
  formRef.value?.resetFields()
  visible.value = false
}
</script>

<style lang="less" scoped></style>
